<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <script type="text/javascript" src="./static/js/config.js"></script>
    <script type="text/javascript" src="./static/libs/axios/axios.min.js"></script>
    <script type="text/javascript" src="./static/libs/vue/vue.js"></script>
    <script type="text/javascript" src="./static/js/common.js"></script>
    <script type="text/javascript" src="./static/libs/element-ui/index.js"></script>
    <link rel="stylesheet" type="text/css" href="./libs/element-ui/index.css"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
        }
        #app{
            width: 100%;
            height: 100%;
        }
        .el-table__expanded-cell{
            padding: 0 0 0 0 !important;
        }
    </style>
</head>
<body>
    <div id="app" v-loading="showLoading"
         element-loading-text="加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-container>
            <el-header style="display: flex;align-content: center">
                <el-form style="margin-top: 20px;margin-left: 10px" :inline="true" :model="searchModel" class="demo-form-inline">
                    <el-form-item label="部门名称">
                        <el-input size="mini" v-model="searchModel.name" placeholder="部门名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini"  icon="el-icon-search"  type="primary" @click="search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini"  icon="el-icon-plus"  type="primary" @click="showAddDialog = true">新增部门</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table
                        :data="tableData.filter(d=>d.pid === 0)"
                        stripe
                        border
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-table class="expand-table-dept"
                                    :data="tableData.filter(d=>d.pid === props.row.id)"
                                    stripe
                                    :show-header="false"
                                    style="width: 100%">
                                <el-table-column
                                        width="48">
                                </el-table-column>
                                <el-table-column v-for="col in tableCols"
                                                 v-if="!col.hidden">
                                    <template slot-scope="scope">
                                        <span :style="col.prop === 'name' ? 'margin-left: 20px' : ''">
                                            {{ col.formatter ? col.formatter(scope.row[col.prop]) : scope.row[col.prop] }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                type="primary"
                                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                    <el-table-column v-for="col in tableCols"
                                     v-if="!col.hidden"
                                     :label="col.label">
                        <template slot-scope="scope">
                            <span>
                                {{ col.formatter ? col.formatter(scope.row[col.prop]) : scope.row[col.prop] }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
        <el-dialog :visible.sync="showAddDialog" title="新增部门" :close-on-click-modal="false">
            <el-form ref="form-add" :model="model" label-width="80px" :rules="rules">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="model.name" placeholder="请输入部门名称"></el-input>
                </el-form-item>
                <el-form-item label="部门类型" prop="type">
                    <el-select v-model="model.type">
                        <el-option
                                label="[根部门]"
                                :value="0">
                        </el-option>
                        <el-option
                                label="[子部门]"
                                :value="1">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="model.type" label="父级部门" prop="pid">
                    <el-select v-model="model.pid">
                        <el-option v-for="item in tableData.filter(d=>d.pid === 0)"
                                :label="item.name" :key="item.id"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单权限" prop="type">
                    <el-input v-model="model.menus"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveAdd">确认</el-button>
                    <el-button @click="showAddDialog = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</body>
<script>
    const model ={
        name:"",
        type:0,
        pid:0,
        menus:""
    };
    new Vue({
        el:"#app",
        data(){
            return{
                showLoading:false,
                baseUrl:"sysDept/",
                showAddDialog:false,   //是否显示新增弹窗
                tableCols:[],   //表格字段
                tableData:[],   //表格数据
                users:[],      //用户集合
                searchModel:{
                    id:"",
                    name:"",
                    pid:"",
                    menus:""
                },
                model,
                rules: {
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { max: 15, message: '部门名称最大输入15个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        watch:{
            "model.type":{
                handler(v){
                    if(v){
                        this.model.pid = this.tableData.filter(d=>d.pid === 0)[0].id;
                    }
                }
            }
        },
        methods:{
            /** 获取表格数据 */
            getTableData(searchCondition){
                this.showLoading =true;
                $http.post(this.baseUrl+"list",searchCondition).then(res=>{
                    this.tableData = res.rows;
                    this.showLoading =false;
                })
            },
            handleEdit(index,row){
                console.log(index,row)
            },
            handleDelete(index,row){
                console.log(index,row)
            },
            search(){
                this.getTableData(this.searchModel);
            },
            /** 新增表单数据 */
            saveAdd(){
                this.$refs["form-add"].validate(valid=>{
                    if(valid){
                        this.showLoading = true;
                        $http.post(this.baseUrl+"add",this.model).then(res=>{
                            if(res.code === 200){
                                this.$message({
                                    type: 'success',
                                    message:res.msg
                                });
                                this.showAddDialog = false;
                                this.resetModel();
                                this.getTableData();
                            }else{
                                this.$message.error(res.msg);
                            }
                            this.showLoading = false;
                        })
                    }
                })
            },
            resetModel(){
                this.model = model;
            }
        },
        created(){
            this.getTableData();
            $http.post("sysUser/list").then(res=>{
                this.users = res.rows;
                this.$set(this,"tableCols",[
                    {
                        prop:"id",
                        label:"主键id",
                        hidden:true
                    },
                    {
                        prop:"name",
                        label:"部门名称"
                    },
                    {
                        prop:"pid",
                        label:"父级部门id",
                        hidden:true
                    },
                    {
                        prop:"menus",
                        label:"菜单权限",
                        hidden:true
                    },
                    {
                        prop:"createBy",
                        label:"创建人",
                        formatter:(v)=>{
                            let user = this.users.find(u=>u.id === v);
                            return user ? user.nickname : '未知';
                        },
                    },
                    {
                        prop:"createTime",
                        label:"创建时间"
                    }
                ])
            })
        }
    })
</script>
</html>